<template>
	<view class="container">
		<view class="form-section">
			<!-- 视频上传/预览区域 -->
			<view class="form-item">
				<text class="label">上传视频</text>
				<view class="video-uploader" @click="chooseVideo" v-if="!videoPath">
					<text class="iconfont icon-video"></text>
					<text class="upload-text">点击选择视频</text>
					<text class="upload-tip">支持mp4格式，最大100MB</text>
				</view>
				<view class="video-preview" v-else>
					<video :src="videoPath" class="preview-video"></video>
					<view class="video-actions">
						<view class="action-btn" @click.stop="chooseVideo">重新选择</view>
						<view class="action-btn delete" @click.stop="removeVideo">删除</view>
					</view>
				</view>
			</view>
			
			<!-- 选择游戏 -->
			<view class="form-item">
				<text class="label">选择游戏</text>
				<view class="game-selector" @click="showGamePicker">
					<view v-if="selectedGame" class="selected-game">
						<image :src="selectedGame.logo" class="game-logo" mode="aspectFill" />
						<text class="game-name">{{ selectedGame.name }}</text>
					</view>
					<text v-else class="placeholder">选择相关游戏</text>
					<text class="arrow">›</text>
				</view>
			</view>
			
			<!-- 视频分类 -->
			<view class="form-item">
				<text class="label">视频分类</text>
				<view class="category-tags">
					<text v-for="category in categories" 
						:key="category.id"
						class="category-tag"
						:class="{ active: selectedCategory === category.id }"
						@click="selectCategory(category.id)">
						{{ category.name }}
					</text>
				</view>
			</view>
			
			<!-- 视频标题 -->
			<view class="form-item">
				<text class="label">视频标题</text>
				<input type="text" 
					v-model="title" 
					placeholder="给视频起个标题吧（5-30字）" 
					placeholder-class="placeholder"
					class="input-field" />
			</view>
			
			<!-- 视频描述 -->
			<view class="form-item">
				<text class="label">视频描述</text>
				<textarea v-model="description" 
					placeholder="添加视频描述，让更多人了解你的视频内容..." 
					placeholder-class="placeholder"
					class="description-field" />
			</view>
			
			<!-- 封面设置 -->
			<view class="form-item">
				<text class="label">视频封面</text>
				<view class="cover-uploader" @click="chooseCover" v-if="!coverImage">
					<text class="iconfont icon-image"></text>
					<text class="upload-text">设置封面</text>
				</view>
				<view class="cover-preview" v-else>
					<image :src="coverImage" mode="aspectFill" class="preview-image" />
					<text class="remove-btn" @click.stop="removeCover">×</text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="draft-btn" @click="saveDraft">存草稿</view>
			<view class="publish-btn" @click="publishVideo">发布视频</view>
		</view>
		
		<!-- 游戏选择弹窗 -->
		<uni-popup ref="gamePicker" type="bottom">
			<view class="game-picker">
				<view class="picker-header">
					<text class="cancel" @click="closeGamePicker">取消</text>
					<text class="title">选择游戏</text>
					<text class="confirm" @click="confirmGameSelection">确定</text>
				</view>
				<view class="game-list">
					<view v-for="game in games" 
						:key="game.game_id" 
						class="game-item"
						:class="{ active: tempSelectedGame?.game_id === game.game_id }"
						@click="selectGame(game)">
						<image :src="game.game_logo" class="game-logo" mode="aspectFill" />
						<text class="game-name">{{ game.game_name }}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			videoPath: '',
			coverImage: '',
			selectedGame: null,
			tempSelectedGame: null,
			categories: [
				{ id: 'gameplay', name: '游戏实况' },
				{ id: 'guide', name: '攻略视频' },
				{ id: 'funny', name: '搞笑集锦' },
				{ id: 'highlight', name: '精彩时刻' }
			],
			selectedCategory: '',
			title: '',
			description: '',
			games: games
		}
	},
	methods: {
		chooseVideo() {
			uni.chooseVideo({
				count: 1,
				maxDuration: 600,
				success: (res) => {
					this.videoPath = res.tempFilePath;
				}
			});
		},
		removeVideo() {
			this.videoPath = '';
		},
		showGamePicker() {
			this.$refs.gamePicker.open();
		},
		closeGamePicker() {
			this.tempSelectedGame = this.selectedGame;
			this.$refs.gamePicker.close();
		},
		selectGame(game) {
			this.tempSelectedGame = game;
		},
		confirmGameSelection() {
			this.selectedGame = this.tempSelectedGame;
			this.$refs.gamePicker.close();
		},
		selectCategory(categoryId) {
			this.selectedCategory = categoryId;
		},
		chooseCover() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.coverImage = res.tempFilePaths[0];
				}
			});
		},
		removeCover() {
			this.coverImage = '';
		},
		saveDraft() {
			if (!this.validateForm(false)) return;
			
			uni.showToast({
				title: '已保存草稿',
				icon: 'success'
			});
		},
		publishVideo() {
			if (!this.validateForm(true)) return;
			
			uni.showModal({
				title: '发布确认',
				content: '确定要发布这个视频吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '正在上传...'
						});
						
						// 模拟上传过程
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '发布成功',
								icon: 'success',
								duration: 2000,
								success: () => {
									setTimeout(() => {
										uni.navigateBack();
									}, 2000);
								}
							});
						}, 2000);
					}
				}
			});
		},
		validateForm(isPublishing) {
			if (!this.videoPath) {
				uni.showToast({
					title: '请选择视频',
					icon: 'none'
				});
				return false;
			}
			
			if (isPublishing) {
				if (!this.selectedGame) {
					uni.showToast({
						title: '请选择游戏',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.selectedCategory) {
					uni.showToast({
						title: '请选择分类',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.title.trim()) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.description.trim()) {
					uni.showToast({
						title: '请输入视频描述',
						icon: 'none'
					});
					return false;
				}
			}
			
			return true;
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	padding-bottom: 80px;
}

.form-section {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
}

.form-item {
	margin-bottom: 20px;
}

.form-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 14px;
	color: #9796B8;
	margin-bottom: 8px;
	display: block;
}

.video-uploader {
	background: #1E1E2E;
	border-radius: 8px;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.upload-text {
	color: #9796B8;
	font-size: 16px;
}

.upload-tip {
	color: #6E6C89;
	font-size: 12px;
}

.video-preview {
	border-radius: 8px;
	overflow: hidden;
}

.preview-video {
	width: 100%;
	height: 200px;
}

.video-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.action-btn {
	flex: 1;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1E1E2E;
	border-radius: 18px;
	color: #9796B8;
	font-size: 14px;
}

.action-btn.delete {
	color: #FF6B6B;
}

.game-selector {
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.selected-game {
	display: flex;
	align-items: center;
	gap: 10px;
}

.game-logo {
	width: 40px;
	height: 40px;
	border-radius: 8px;
}

.game-name {
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
	font-size: 14px;
}

.arrow {
	color: #6E6C89;
	font-size: 18px;
}

.category-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.category-tag {
	padding: 6px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
}

.category-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.input-field {
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px;
	color: #9796B8;
	font-size: 14px;
}

.description-field {
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px;
	width: 100%;
	height: 100px;
	color: #9796B8;
	font-size: 14px;
}

.cover-uploader {
	background: #1E1E2E;
	border-radius: 8px;
	height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cover-preview {
	position: relative;
	width: 100%;
	height: 150px;
	border-radius: 8px;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.remove-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #2D2D44;
	padding: 12px;
	display: flex;
	gap: 12px;
}

.draft-btn, .publish-btn {
	flex: 1;
	height: 40px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.draft-btn {
	background: #1E1E2E;
	color: #9796B8;
}

.publish-btn {
	background: #9796B8;
	color: #1E1E2E;
}

.game-picker {
	background: #2D2D44;
	border-radius: 12px 12px 0 0;
	max-height: 70vh;
}

.picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.cancel, .confirm {
	color: #6E6C89;
	font-size: 14px;
}

.confirm {
	color: #9796B8;
}

.picker-header .title {
	color: #9796B8;
	font-size: 16px;
}

.game-list {
	padding: 15px;
	max-height: calc(70vh - 50px);
	overflow-y: auto;
}

.game-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
}

.game-item.active {
	background: rgba(151, 150, 184, 0.1);
}

.iconfont {
	font-size: 24px;
	color: #6E6C89;
}
</style> 